'use client';

import { AiInput, AiTable } from '@hyq-ai/chatbot-react';

export default function Home() {
  const DAY = 24 * 60 * 60 * 1000;

  const columns = [
    {
      title: '标题',
      dataIndex: 'name',
      fixed: true,
      width: 300,
      resize: false,
      render: (text) => {
        return <div>{text}</div>;
      },
      filters: [
        {
          text: 'Semi Design 设计稿',
          value: 'Semi Design 设计稿',
        },
        {
          text: 'Semi D2C 设计稿',
          value: 'Semi D2C 设计稿',
        },
      ],
      onFilter: (value, record) => record.name.includes(value),
    },
    {
      title: '大小',
      dataIndex: 'size',
      width: 200,
      sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
      render: (text) => `${text} KB`,
    },
    {
      title: '所有者',
      width: 200,
      dataIndex: 'owner',
      render: (text) => {
        return <div>{text}</div>;
      },
    },
    {
      title: '更新日期',
      dataIndex: 'updateTime',
      sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
      render: (value) => {
        return new Date(value), 'yyyy-MM-dd';
      },
    },
  ];

  const data: unknown[] = [];
  for (let i = 0; i < 6; i++) {
    const isSemiDesign = i % 2 === 0;
    const randomNumber = (i * 1000) % 199;
    data.push({
      key: '' + i,
      name: isSemiDesign
        ? `Semi Design 设计稿${i}.fig`
        : `Semi D2C 设计稿${i}.fig`,
      owner: isSemiDesign ? '姜鹏志' : '郝宣',
      size: randomNumber,
      updateTime: new Date().valueOf() + randomNumber * DAY,
      avatarBg: isSemiDesign ? 'grey' : 'red',
    });
  }

  return (
    <div className='grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]'>
      <main className='flex flex-col gap-[32px] row-start-2 items-center sm:items-start'>
        main
        <AiInput />
        <AiTable
          columns={columns}
          dataSource={data}
          pagination={false}
          bordered
          size='small'
        ></AiTable>
      </main>
    </div>
  );
}
